<template>
    <div>
        <QueryForm @handleResetForm="handleResetForm" :formColumns="formColumns" v-model="menuform" @handleFormAction="handleFormAction"></QueryForm>
        <div class="main-box">
          <div class="action">
            <el-button size="mini" type="primary" @click="openDialog">新增</el-button>
            <el-button size="mini" type="danger" v-has="'user-patch-delete'">批量删除</el-button>
          </div>
          <BaseTable :tableData="tableData" :pager="{}" :tree="tree" :columns="columnss"></BaseTable>
        </div>
    </div>
</template>

<script>
import QueryForm from '../../components/common/QueryForm.vue';
import BaseTable from '../../components/common/BaseTable.vue'
import menuMenu from '../../api/menu.js'


export default {
  data() {
    return {
      menuform:{
        menuName:'',
        state: 0
      },
      tableData:[],
      formColumns: {
        ref : "menuform",
        inline : true,
        size : "mini",
        columns:[
          {
          prop: 'menuName',
          placeholder: '请输入菜单名称',
          label: '菜单名称',
          type: 'input',
        },
        {
          prop: '状态',
          placeholder: '菜单状态',
          type: 'select',
          option:[
            {value:1,label:'正常'},
            {value:0,label:'停用'},
          ],
        },
        {
          type: 'action',
          list: [
            {
              action: 'search',
              size: 'mini',
              text: '查询',
              type: 'primary',
            },
            {
              action: 'reset',
              size: 'mini',
              text: '重置',
              type: 'default',
            },
          ],
        },
        ]
      },
      columnss: [
        {
          label:'菜单名称',
          prop:'menuName'
        },
        {
          label: '图标',
          prop: 'icon',
        },
        {
          label: '菜单类型',
          prop: 'menuType',
          formatter(row, column, value, index) {
            return { "1": '菜单', "2": '按钮' }[value];
          },
        },
        {
          label: '权限标识',
          prop: 'menuCode',
        },
        {
          label: '路由地址',
          prop: 'path',
        },
        {
          label: '组件路径',
          prop: 'component',
        },
        {
          label: '菜单状态',
          prop: 'menuState',
          formatter(row, column, value, index){
            return {"1" : "正常", "0" : "停用"}[value]
          }
        },
         {
          label : "创建时间",
          prop : "createTime",
          formatter : (row, column, value, index)=>{
            return this.dayjs(value).format("YYYY-MM-DD HH:mm:ss")
          }
        },
        {
          type: 'action',
          label: '操作',
          width: '150',
          list: [
            {
              text: '新增',
              action: 'add',
              size: 'mini',
              type: 'primary',
            },
            {
              text: '编辑',
              action: 'edit',
              size: 'mini',
              type: 'default',
            },
            {
              text: '删除',
              size: 'mini',
              type: 'danger',
              action: 'delete',
            },
          ],
        },
      ],
      tree : {
        "row_id" : "_id",
        "tree_props" : {children : 'children'}
      },
    };
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 获取菜单数据
    async getMenuList(){
      const response = await menuMenu.getMenuList(this.menuform)
      this.tableData =response
    },
    // 点击查询和重置
    handleFormAction(action){
      if(action === 'search') {
        this.handleSearch()
      }else{
        this.handleResetForm()
      }
    },
    // 重置
    handleResetForm(){
      this.getMenuList()
    },
    // 查询
    handleSearch(action){
      this.getMenuList()
    },
    openDialog(){}
  },
  components: {
    QueryForm,
    BaseTable
  },
};
</script>

<style>

</style>
